<template>
  <vxe-modal
    ref="eipModal"
    type="modal"
    v-model="visible"
    :width="width"
    :height="height"
    :show-close="false"
    :show-zoom="false"
    :resize="resize"
    :id="id"
    :fullscreen="isFullscreen"
    :zIndex="zIndex"
    :mask-closable="maskClosable"
    :showFooter="showFooter"
    :dblclickZoom="true"
    :destroy-on-close="true"
    :position="position"
    :storage="true"
    :remember="remember"
    @hide="cancel"
    @close="cancel"
    @cancel="cancel"
  >
    <template #title>
      <slot name="title"></slot>
      <span>{{ title }}</span>
    </template>
    <template slot="corner">
      <div class="flex justify-between align-center">
        <slot name="header"></slot>
        <a-space class="margin-left">
          <a-tooltip :title="isFullscreen ? '最小化' : '最大化'">
            <a-icon
              :style="{ fontSize: '16px' }"
              :type="isFullscreen ? 'fullscreen-exit' : 'fullscreen'"
              @click="zoom()"
            />
          </a-tooltip>
          <a-tooltip title="关闭">
            <a-icon
              type="close"
              @click="cancel"
              :style="{ fontSize: '16px' }"
            />
          </a-tooltip>
        </a-space>
      </div>
    </template>
    <slot name="body"></slot>
    <template slot="footer">
      <slot name="footer"></slot>
    </template>
  </vxe-modal>
</template>

<script>
import { newGuid } from "@/utils/util";
export default {
  name: "eip-modal",
  data() {
    return {
      isFullscreen: this.fullscreen,
    };
  },
  computed: {},

  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    zIndex: {
      type: Number,
      default: 1000,
    },
    title: {
      type: String,
    },
    width: {
      type: [String, Number],
      default: 500,
    },
    height: {
      type: [String, Number],
    },
    id: {
      type: String,
      default: newGuid(),
    },
    resize: {
      type: Boolean,
      default: true,
    },
    fullscreen: {
      type: Boolean,
      default: false,
    },
    maskClosable: {
      type: Boolean,
      default: false,
    },
    showFooter: {
      type: Boolean,
      default: true,
    },
    remember: {
      type: Boolean,
      default: false,
    },
    position: {
      type: Object,
      default: function () {
        return {
          top: null,
          left: "center",
        };
      },
    },
  },
  mounted() {},
  methods: {
    /**
     * 取消
     */
    cancel() {
      this.$emit("close");
    },
    zoom() {
      this.$refs.eipModal.zoom();
      this.isFullscreen = !this.isFullscreen;
      this.$emit("zoom", this.isFullscreen);
    },
  },
};
</script>
<style lang="less" scoped>
/deep/ .vxe-modal--content {
  padding: 1px !important;
}
/deep/ .vxe-modal--body {
  border-bottom: 1px solid #ebeef5;
}
</style>
